<template>
  <z-modal
    :width="800"
    v-bind="modalOption"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="联系人名称" prop="name">
              <a-input v-model.trim="form.name" placeholder="请输入联系人名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="customerName">
              <a-input-search v-model="form.customerName" readOnly @search="onSearchCustomer" placeholder="请输入客户名称">
                <a-button slot="enterButton">选择客户</a-button>
              </a-input-search>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="客户所属部门" prop="customerDept">
              <a-input v-model.trim="form.customerDept" placeholder="请输入客户所属部门"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="下次联系时间" prop="nextTime">
              <a-date-picker v-model="form.nextTime"  placeholder="请选择下次联系时间" style="width: 100%" format="YYYY-MM-DD" @change="(value,dateString) =>{ this.form.nextTime = dateString}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="职务" prop="post">
              <a-input v-model.trim="form.post" placeholder="请输入职务"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户年龄" prop="age">
              <a-input-number v-model="form.age" :min="1" :max="150" style="width: 100%" placeholder="请输入客户年龄"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系方式" prop="mobile">
              <a-input v-model.trim="form.mobile" placeholder="请输入联系方式"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="电子邮箱" prop="email">
              <a-input v-model.trim="form.email" placeholder="请输入电子邮箱"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属公司" prop="company">
              <a-input v-model.trim="form.company" placeholder="请输入所属公司"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系人所有人" prop="ownerUserId">
              <ZSelectUserByDep :multi="false" v-model="form.ownerUserId" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" prop="remark">
              <a-textarea v-model.trim="form.remark" :maxLength=200 placeholder="请输入备注"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <SelectCustomerModal ref="selectModal" @ok="selectOK"></SelectCustomerModal>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import SelectCustomerModal from '@/pages/crm/customer/modules/SelectCustomerModal'
export default {
  name: 'CrmContactsModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag,
    ZSelectUserByDep,
    SelectCustomerModal
  },
  data() {
    return {
      validatorRules: {
        name: [
            { required: true, message: '请输入联系人名称!'},
          ],
        email: [
            { type: 'email', message: '请输入正确的邮箱地址!'},
          ],
        },
      url: {
        add: "/contacts/add",
        edit: "/contacts/edit",
        queryById: "/contacts/queryById"
      }
    }
  },
  methods: {
    addAfter() {
    },
    onSearchCustomer() {
      this.$refs.selectModal.showModal()
    },
    selectOK(rows, idstr) {
      if(!rows){
        this.form.customerId = ''
        this.form.customerName = ''
        this.form.customerDept = ''
      }else{
        let row = rows[0]
        this.form.customerId = row.id
        this.form.customerName = row.customerName
        this.form.customerDept = row.createDept
      }
      this.form = Object.assign({},this.form)
    }
  }
}
</script>
